let divs = document.querySelectorAll("div");
document.body.style.backgroundColor = "#000";
let count = 0;
changeColor(divs);
onclicks(divs);
// divs.forEach((div, index) => {
//   div.onclick = () => {
//     div.style.backgroundColor =
//       "#" + Math.floor(Math.random() * 16777215).toString(16);
//     div.innerText = count++;
//     createNewDiv();
//   };
// });
function changeColor(divs) {
  divs.forEach((divs, index) => {
    divs.style.backgroundColor =
      "#" + Math.floor(Math.random() * 16777215).toString(16);
    divs.style.width = "50px";
    divs.style.height = "50px";
    divs.style.borderRadius = "50%";
    divs.style.position = "absolute";
    divs.style.left = `${Math.random() * 100}%`;
    divs.style.top = `${Math.random() * 100}%`;
    divs.style.transition = "all 0.5s";
    divs.style.fontSize = "20px";
    divs.style.textAlign = "center";
    divs.style.color = "#fff";
    divs.addEventListener("touchstart", function (event) {
      event.preventDefault();
      var x = event.changedTouches[0].clientX;
      var y = event.changedTouches[0].clientY;
      var disX = x - divs.offsetLeft;
      var disY = y - divs.offsetTop;
      divs.addEventListener("touchmove", function (event) {
        event.preventDefault();
        var newX = event.changedTouches[0].clientX - disX;
        var newY = event.changedTouches[0].clientY - disY;
        if (newX < 0) {
          newX = 0;
        } else if (newX > window.innerWidth - divs.offsetWidth) {
          newX = window.innerWidth - divs.offsetWidth;
        }
        if (newY < 0) {
          newY = 0;
        } else if (newY > window.innerHeight - divs.offsetHeight) {
          newY = window.innerHeight - divs.offsetHeight;
        }
        divs.style.left = newX + "px";
        divs.style.top = newY + "px";
      });
    });
  });
}
function createNewDiv() {
  const newDiv = document.createElement("div");
  newDiv.innerText = count;
  document.body.append(newDiv);
  divs = document.querySelectorAll("div");
  onclicks(divs);
  changeColor(divs);
}
function onclicks(divs) {
  divs.forEach((div, index) => {
    div.onclick = () => {
      div.style.backgroundColor =
        "#" + Math.floor(Math.random() * 16777215).toString(16);
      div.innerText = count++;
      changeColor(divs);
    };
  });
}

// function move(divs) {
//   divs.forEach((divs, index) => {
//     divs.style.left = `${Math.random() * 80}%`;
//     divs.style.top = `${Math.random() * 80}%`;
//   });
// }
// 随时间线性移动
// setInterval(() => {
//   divs.forEach((divs, index) => {
//     divs.style.left = `${Math.random() * 90}%`;
//     divs.style.top = `${Math.random() * 90}%`;
//   });
// }, 1000);
